<!-- 表格2,action换成slot -->
<script setup lang="ts">
import type { IColumnConfig, ITableObj, ITableProp } from '@/type/interfaces'

interface IProps {
  tableProp?: ITableProp
  tableObj: ITableObj
}
const props = withDefaults(defineProps<IProps>(), {
  tableProp: () => {
    return {
      width: '100%',
      stripe: true,
      size: '',
    }
  }
})
const columnConfig: Array<IColumnConfig> = [
  {
    prop: 'id'
    , name: 'level'
  }
  , {
    prop: 'name'
    , name: '名词'
  }
  , {
    prop: 'publication'
    , name: '出版'
  }
  , {
    prop: 'bookName'
    , name: '签名'
  }
]
const config = ref<ITableProp>({})
const handleEdit = (index: number, row: any) => {
  console.log('handleEdit', index, row);
}
const handleDelete = (index: number, row: any) => {
  console.log('handleDelete', index, row);
}
const init = () => {
  if (props.tableProp) {
    Object.assign(config.value, props.tableProp)
  }
}
init()
</script>
<template>
  <div class="table2-container">
    <el-table :data="tableObj.data" :style="{ width: config.width }" size="small">
      <el-table-column type="index" fixed="left" label="行" />
      <el-table-column v-for="(item, index) in columnConfig" :key="index" :column-key="index" :prop="item.prop"
        :label="item.name ? item.name : item.prop" :width="item.width" />
      <el-table-column label="action" min-width="80px" fixed="right">
        <template #default="scope">
          <slot name="action" :index="scope.$index" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <narration>
      <div class="">action支持slot,设置最小宽度</div>
      <div>按钮包裹在一个元素中，设置该元素宽度，不使用actionWidth控制列宽</div>
    </narration>
  </div>
</template>